<template>
  <div class="ora-container">
    <div class="or-balance-view">
      <p class="or-balance-title">当前可用</p>
      <p class="or-balance">{{currentOrange}}</p>
      <van-button type="default" class="or-button">如何获取?</van-button>
      <!-- 下边框 -->
      <div class="van-hairline--bottom seperate-bottom"></div>
    </div>
    <div class="consume-list">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      >
        <van-cell v-for="item in List" :key="item" :title="item.mark" :value="item.amount" :label="getDateDiff(item.created_at)"/>
      </van-list>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { Button, List, Cell } from 'vant'
import { getDateDiff } from '../../common/util.js'
import ElementUI from 'element-ui'

export default {
  components: {
    [Button.name]: Button,
    [List.name]: List,
    [Cell.name]: Cell
  },
  data () {
    return {
      List: [],
      loading: false,
      finished: false,
      currentOrange: ''
    }
  },
  created: function () {
    let loadingInstance = ElementUI.Loading.service()
    loadingInstance.close()
    this.getCurrentOrange()
  },
  methods: {
    onLoad () {
      this.axios
        .get('/user/credit', { headers: { FastMode: true } })
        .then(res => {
          console.log(res)
          let item = res.data.items
          for (let i = 0; i < item.length; i++) {
            this.List.push(item[i])
          }
          this.loading = false
          if (
            res.data.meta.currentPage === res.data.meta.pageCount ||
            res.data.meta.pageCount === 0
          ) {
            this.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getCurrentOrange () {
      this.axios
        .get('/user/credit/current')
        .then(res => {
          console.log(res)
          if (res.data == null) {
            this.currentOrange = 0
            return
          }
          this.currentOrange = res.data.current
        })
        .catch(function (error) {
          console.log(error)
          this.currentOrange = '-'
        })
    },
    getDateDiff (timestamp) {
      return getDateDiff(timestamp)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
p {
  margin: 0;
  padding: 0;
}

.ora-container {
  background-color: white;
}

.or-balance-view {
  // height: 3.31rem;
  width: 100%;
  text-align: center;
}

.or-balance-title {
  padding-top: 0.38rem;
  font-size: 0.34rem;
  color: #3f3f3f;
}

.or-balance {
  margin-top: 0.27rem;
  font-size: 0.65rem;
  color: #fe574e;
  font-weight: bold;
}

.or-button {
  margin-top: 0.4rem;
  height: 0.76rem;
  width: 3rem;
  color: #fe574e;
  border-radius: 0.38rem;
  border-width: 0.01rem;
  border-color: #fe574e;
}

.seperate-bottom {
  padding-top: 0.5rem;
}
</style>
